{% extends "main_user.html" %}


{% block title %}
    测试信息平台
{% endblock %}

<!-- Bootstrap core CSS -->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

{% block body %}
    <div class="page-header">
        <h2>测试机器信息汇总</h2>
    </div>


    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>IP</th>
                <th>User/Passwd</th>
                <th>Info</th>
                <th>Operation</th>
            </tr>
        </thead>
        <tbody id="tbody">
            {% for machine in machines_info %}
            <tr>
              <td>{{ machine.ip }}</td>
              <td>{{ machine.username }}/{{machine.passwd}}</td>
              <td>{{ machine.cpu }}核/{{machine.memory}}G</td>
              <td><a href="{{ url_for('main.delete_machines', ip=machine.ip) }}" class="btn btn-danger">删除</a></td>
            </tr>
            {% else %}
            <tr>
                <td>No PC Found.</td>
            </tr>
            {% endfor %}

        </tbody>
    </table>

    <form class="form-inline" action="/add-machines" method="post" role="form">
        <div class="form-group">
            <label class="sr-only" for="IP">IP</label>
            <input type="ip" class="form-control" name="IP" id="IP" placeholder="Enter ip">
        </div>
        <div class="form-group">
            <label class="sr-only" for="Username">Username</label>
            <input type="Username" class="form-control" name="Username" id="Username" placeholder="Username">
        </div>
        <div class="form-group">
            <label class="sr-only" for="Passwd">Passwd</label>
            <input type="Passwd" class="form-control" name="Passwd" id="Passwd" placeholder="Passwd">
        </div>
        <div class="form-group">
            <label class="sr-only" for="CPU">CPU</label>
            <input type="CPU" class="form-control" name="CPU" id="CPU" placeholder="CPU">
        </div>
        <div class="form-group">
            <label class="sr-only" for="Memory">Memory</label>
            <input type="Memory" class="form-control" name="Memory" id="Memory" placeholder="Memory">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>

    <h3>{{ get_flashed_messages()[0] }}</h3>
    <script src="{{ url_for('static', filename='js/jquery.min.js' )}}"></script>

    <!--<script type="text/javascript">-->
    <!--// createNode-->
    <!--var create = function() {-->
        <!--$.ajax({-->
            <!--url: '/machines_info/data/select',-->
            <!--dataType: 'json',-->
            <!--success: function(data) {-->
                <!--console.log(data);-->
                <!--$('#tbody').html("")-->
                <!--for (var k in data) {-->
                    <!--console.log(k)-->
                    <!--var tr = '<tr>' +-->
                    <!--'<td>'+data[k].ip+'</td>' +-->
                    <!--'<td>'+data[k].username+" / "+data[k].passwd+'</td>' +-->
                    <!--'<td>'+data[k].cpu+"核 / "+data[k].memory+"G"+'</td>'+-->
                    <!--'<td><button class="btn btn-small btn-primary" type="button" onclick=UpdateData()>'+-->
                    <!--'更新</button>'+-->
                    <!--'<button class="btn btn-small btn-primary" type="button" onclick=DeleteData(event)>'+-->
                    <!--'删除</button></td>';-->
                    <!--$('#tbody').append(tr)-->
                <!--};-->
            <!--}-->
        <!--})-->
    <!--}-->
    <!--create();-->
    <!--function UpdateData(){-->
            <!--alert("Start to update database!")-->
        <!--}-->

    <!--function DeleteData(e){-->
            <!--var ip= "ip=" + $(e.target).parents("tr").find('td').eq(0).text();-->
            <!--console.log(ip);-->
            <!--&lt;!&ndash;alert("Start to delete this machine!")&ndash;&gt;-->
            <!--console.log($(this).parent())-->
            <!--$.ajax({-->
                <!--url: '/machines_info/data/delete',-->
                <!--method:'GET',-->
                <!--dataType: 'json',-->
                <!--data:ip,-->
                <!--success: function(res) {-->
                    <!--console.log(res);-->
                    <!--create()-->
                <!--}-->
            <!--})-->

        <!--}-->
    <!--</script>-->
{% endblock %}
